<template>
  <div class="u-cover">
    <img v-lazy="`${Rdata.picUrl}?param=140y140`" />

    <router-link :to="url" class="msk mask1"></router-link>
    <div class="bottom mask1">
      <a href="javascirpt:;" class="icon-play mask2" title="播放"></a>
      <span class="icon-headset mask2"></span>
      <span class="nb">{{ numberOf }}</span>
    </div>
  </div>
  <slot name="SongInfo1"></slot>
  <slot name="SongInfo2"></slot>
</template>

<script>
import { computed } from "@vue/runtime-core";
export default {
  name: "SonglistNavIcon",
  props: {
    Rdata: { type: Object },
    url: {
      type: Object,
      default: function () {
        return {
          name: "",
        };
      },
    },
  },
  setup(props) {
    const numberOf = computed(() => {
      if (props.Rdata.type === 0) {
        if (props.Rdata.playCount >= 100000) {
          return Math.floor(props.Rdata.playCount / 10000) + "万";
        } else {
          return props.Rdata.playCount;
        }
      } else if (props.Rdata.type === 1) {
        if (props.Rdata.program.adjustedPlayCount >= 100000) {
          return Math.floor(props.Rdata.program.adjustedPlayCount / 10000) + "万";
        } else {
          return props.Rdata.program.adjustedPlayCount;
        }
      }
    });

    return {
      numberOf,
    };
  },
};
</script>

<style scoped lang="less">
.u-cover {
  position: relative;
  display: block;
  width: 140px;
  height: 140px;
  .msk {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: 0 0;
  }
  .bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 27px;
    background-position: 0 -537px;
    color: #ccc;
  }
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.icon-play {
  position: absolute;
  right: 10px;
  bottom: 5px;
  width: 16px;
  height: 17px;
  background-position: 0 0;
  &:hover {
    background-position: 0 -60px;
  }
}
.icon-headset {
  float: left;
  width: 14px;
  height: 11px;
  background-position: 0 -24px;
  margin: 9px 5px 9px 10px;
}
.nb {
  float: left;
  margin: 7px 0 0 0;
}
</style>
